<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="js/vue.js"></script>
  <style>
    .current {
      color: red;
    }
  </style>
</head>

<body>
  <div id="app" >
    <!-- 
      作用域插槽:
      应用场景: 父组件对子组件的内容进行加工处理
      父组件的 slot-scope 可以获取到子组件的 slot, 从而进行一些加工和处理

      插槽定义:
      // v-bind:item : 这个item 是自定义的
      // ="item" : 这个 item 是 v-for中的数据
      <ul>
        <li v-for="item in list" v-bind:key="item.id">
          <slot v-bind:item="item">   
            {{item.name}}
          </slot>
        </li>
      </ul>

      插槽填充:
      <fruit-list :list="list">
        <template slot-scope="slotProps">
          <strong v-if="slotProps.item.current">
            {{slotProps.item.name}}
          </strong>
        </template>
      </fruit-list>
    -->


    <fruit-list :list="list">
      <!-- slot-scope 可以得到子组件中绑定的属性,也就是 :info="item"  -->
      <template slot-scope="slotProps">
        <strong class="current" v-if="slotProps.info.id == 3">
          <!-- 这里可以拿到子组件中 info属性的name, 这个info就是子组件slot中 v-bind 绑定的名字 -->
          {{slotProps.info.name}}
        </strong>
        <span v-else>
          {{slotProps.info.name}}
        </span>
      </template>
    </fruit-list>
    

  </div>


  <script type="text/javascript">
    Vue.component('fruit-list', {
      props:['list'],
      template: `
      <div>
        <li :key="item.id" v-for="item in list">
          <slot :info="item">
            {{item.name}}
          </slot>
        </li>
      </div>
      `
    })
    var vm = new Vue({
      el: '#app',
      data:{
        list:[
          {id:1,name:"apple"},
          {id:2,name:"orange"},
          {id:3,name:"banana"}
        ]
      }
    });
  </script>
</body>

</html>